<template>
  <el-dialog title="分配数据权限" :visible.sync="dialogFormVisible" width="500px" @close="close" :close-on-click-modal="false" v-dialogDrag>
    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="角色编码">
        <el-input v-model="form.roleCode" readonly />
      </el-form-item>
      <el-form-item label="角色名称">
        <el-input v-model="form.roleName" readonly />
      </el-form-item>
      <el-form-item label="权限范围" prop="dataScope">
        <el-select v-model="form.dataScope" style="width: 100%">
          <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据权限" prop="deptIds" v-show="form.dataScope == 2">
        <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
        <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
        <!-- <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox> -->
        <el-tree
          :data="deptOptions"
          show-checkbox
          default-expand-all
          ref="dept"
          node-key="deptId"
          :check-strictly="!form.deptCheckStrictly"
          empty-text="正在加载..."
          :props="deptDefaultProps"
        ></el-tree>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { doEditDept } from '@/api/system/role'
  import { getRoleDept } from '@/api/system/dept'

  export default {
    name: 'RolePermission',
    data() {
      return {
        dialogFormVisible: false,
        form: {
          roleId: undefined,
          roleCode: undefined,
          roleName: undefined,
          dataScope: undefined,
          deptCheckStrictly: [],
        },
        rules: {
          dataScope: [{ required: true, trigger: 'blur', message: '请选择数据权限' }],
          deptIds: [{ required: this.isDataScope, trigger: 'blur', validator: this.validateDepts }],
        },
        deptOptions: [],
        deptIds: [],
        // 部门数据范围选项
        deptDefaultProps: {
          children: 'children',
          label: 'deptName',
        },
        deptExpand: false,
        deptNodeAll: false,
        // 数据范围选项
        dataScopeOptions: [
          {
            value: '1',
            label: '全部数据权限',
          },
          {
            value: '2',
            label: '自定数据权限',
          },
          {
            value: '3',
            label: '本部门数据权限',
          },
          {
            value: '4',
            label: '本部门及以下数据权限',
          },
          {
            value: '5',
            label: '仅本人数据权限',
          },
        ],
      }
    },
    created() {},
    methods: {
      validateDepts(rule, value, callback) {
        if (this.deptIds.length == 0) {
          callback(new Error('请选择组织'))
        } else {
          callback()
        }
      },
      validateMenus(rule, value, callback) {
        if (this.menuIds.length == 0) {
          callback(new Error('请选择菜单权限'))
        } else {
          callback()
        }
      },
      isDataScope() {
        if (this.form.dataScope == 2) {
          return true
        }
        return false
      },
      // 树权限（展开/折叠）
      handleCheckedTreeExpand(value, type) {
        let treeList = this.deptOptions
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
        }
      },
      // 树权限（全选/全不选）
      handleCheckedTreeNodeAll(value, type) {
        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
      },
      // 树权限（父子联动）
      handleCheckedTreeConnect(value, type) {
        this.form.deptCheckStrictly = value ? true : false
      },
      // 所有部门节点数据
      getDeptAllCheckedKeys() {
        // 目前被选中的部门节点
        let checkedKeys = this.$refs.dept.getCheckedKeys()
        // 半选中的部门节点
        let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys()
        checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
        return checkedKeys
      },
      showEdit(row) {
        this.dialogFormVisible = true
        this.form = Object.assign({}, row)
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.deptIds = this.getMenuAllCheckedKeys()
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            console.log('form', this.form)
            console.log('deptIds', this.deptIds)
          } else {
            return false
          }
        })
      },
    },
  }
</script>
